<template>
  <body background="/../src/assets/images/background1.jpg">
  <div class="content">
    <h1 align="center">用户注册</h1><br />
    <font color="aqua">
      <form  action="Register" class="user-form"  method="post">
        <fieldset >
          <div v-if="rmsg !== null" class="user-form-error">
            <p class="error-msg">{{ rmsg }}</p>
          </div>
          <h3 align="center">User Information</h3>
          <div id="feedback"></div>
          <table align="center" >
            <tr>
              <td  class="font111">User ID:</td>
              <td><input v-model.trim="userid" type="text" id="userid" name="userid" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Password:</td>
              <td><input v-model.trim="password" type="text" id="password"  name="Password" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Repeat Password:</td>
              <td><input type="text" id="password1" name="Password2"  /></td>
            </tr>
          </table>

          <h3 align="center">Account Information</h3>
          <table  align="center">
            <tr>
              <td class="font111">First name:</td>
              <td><input v-model.trim="firstname" type="text" id="password2" name="firstName" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Last name:</td>
              <td><input v-model.trim="lastname" type="text"  id="password3" name="lastName" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Email:</td>
              <td><input v-model.trim="email" type="text" id="password4" name="email" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Phone:</td>
              <td><input v-model.trim="phone" type="text" id="password5" name="phone" class="font111"/></td>
            </tr>
            <tr>
              <td class="font111">Address 1:</td>
              <td><input v-model.trim="addr1" type="text" id="password6" name="address1" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Address 2:</td>
              <td><input v-model.trim="addr2" type="text" id="password7" name="address2" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">City:</td>
              <td><input v-model.trim="city" type="text" id="password8" name="city" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">State:</td>
              <td><input v-model.trim="state" type="text" id="password9" name="state" size="4" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Zip:</td>
              <td><input v-model.trim="zip" type="text" id="password10" name="zip" size="10" class="font111" /></td>
            </tr>
            <tr>
              <td class="font111">Country:></td>
              <td><input v-model.trim="country" type="text"  id="password11" name="country" size="15"  class="font111"/></td>
            </tr>
          </table>

          <h3 align="center">Profile Information</h3>

          <table class="table-view" align="center">
            <tr>
              <td class="font111">Language Preference:</td>
              <td><select id="password12" name="languagePreference" class="font111">
                <option value="CHINESE" class="font111">CHINESE</option>
                <option  value="ENGLISH" class="font111">ENGLISH</option>
              </select></td>
            </tr>
            <tr>
              <td class="font111">Favourite Category:</td>
              <td><select id="password13" name="favouriteCategoryId" class="font111">
                <option value="FISH" class="font111">FISH</option>
                <option selected="selected" value="DOGS" class="font111">DOGS</option>
                <option value="REPTILES" class="font111">REPTILES</option>
                <option value="CATS" class="font111">CATS</option>
                <option value="BIRDS" class="font111">BIRDS</option>
              </select></td>
            </tr>
<!--            <%&#45;&#45;                    <tr>&#45;&#45;%>-->
<!--            <%&#45;&#45;                        <td class="font111">Enable MyList</td>&#45;&#45;%>-->
<!--            <%&#45;&#45;                        <td><input id="password14" type="checkbox" name="listOption"  value="1" class="font111"/></td>&#45;&#45;%>-->
<!--            <%&#45;&#45;                    </tr>&#45;&#45;%>-->
            <tr>
              <td class="font111">Enable MyBanner</td>
              <td><input id="password15" type="checkbox" name="bannerOption" value="1" class="font111"/></td>
            </tr>

          </table>
        </fieldset>

        <input @click.prevent="finish" id="denglu1" type="submit" value="开始注册" align="center" >

      </form>
<!--      有个register.js-->

    </font>
  </div>
  </body>
</template>

<script>
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'

export default {
  name:'register',
  props: {
    rmsg: String
  },
  data(){
    return{
      userid:"",
      password:"",
      email:"",
      firstname:"",
      lastname:"",
      phone:"",
      addr1:"",
      addr2:"",
      city:"",
      state:"",
      zip:"",
      country:"",
    };
  },methods:{
    //点击完成按钮触发finish
    finish:function()
    {
      if(localStorage['userid']===this.userid)
      {
        alert("用户名已存在");//如果用户名已存在则无法注册
      }
      else if(this.name==='')
      {
        alert("用户名不能为空");
      }
      else{//将新用户信息存储到localStorage
        sessionStorage.setItem('userid',this.userid);
        sessionStorage.setItem('password',this.password);
        sessionStorage.setItem('email',this.email);
        sessionStorage.setItem('firstname',this.firstname);
        sessionStorage.setItem('lastname',this.lastname);
        sessionStorage.setItem('phone',this.phone);
        sessionStorage.setItem('addr1',this.addr1);
        sessionStorage.setItem('addr2',this.addr2);
        sessionStorage.setItem('city',this.city);
        sessionStorage.setItem('state',this.state);
        sessionStorage.setItem('zip',this.zip);
        sessionStorage.setItem('country',this.country);
        alert("注册成功");
        this.$router.replace('/account/signonForm');//完成注册后跳转至登录页面
      }
    }
  }
};
</script>

<style scoped>
@import "../../assets/css/sign.css";
</style>